<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性绑定和双向数据绑定</title>
    <script src="./vue.js"></script>
</head>
<body>
   <div id="root">
       <!--title为div属性，鼠标悬停会显示-->
       <!--<div title="this is hello world">hello world</div>-->
       <!--属性绑定，将title属性和数据项里的data绑定-->
       <!--<div v-bind:title  ="'andy'+ title">hello world</div>-->
       <div :title  ="'andy'+ title">hello world</div>

       <!--双向数据绑定,即数据和页面可以互相决定对方的内容-->
       <input v-model="content"/>
       <div>{{content}}</div>

   </div>

   <script>
       new Vue({
           el:"#root",
           data:{
               title: "this is hello world",
               content:"this is content"
           }
       })
   </script>

</body>
</html>